<template>
    <!-- 医院新闻弹框 -->
    <div class="newsDialog">
        <el-dialog
            :close-on-click-modal="false"
            v-model="isShow.value"
            :show-close="false"
            @close="emit('handelDialogClose')">
          <i class="close iconfont icon-guanbi" @click="emit('closeDialog')"></i>
          <div class="content">
            <div class="title">医院新闻</div>
            <div v-if='newsListShow' style="height:91%">
                <div class="nav-content">
                    <div class="nav">
                        <div class="scroll">
                            <span class="arrow left" @click="leftClick">&lt;</span>
                            <div class="type" 
                                    v-for="type in newsDialogData.newsInfo.newsType" 
                                    :key="type.catid" 
                                    @click="onClicknewsNav(type.catid,type.catname)" 
                                    :class="{active:type.catid==isActive}">
                                    {{type.catname}}
                            </div>
                            <span class="arrow right" @click="rightClick">&gt;</span>
                        </div>
                    </div>
                </div>
                <!-- 移动端 -->
                <div class="small-contanier">
                    <div v-if="newsDialogData.newsInfo.newsContent.length != 0" style="height:100%">
                        <el-scrollbar >
                            <div>
                                <div class="special" v-if="newsType == '专题专栏'">
                                    <div class="special-content">
                                        <div  class="special-item" v-for="newsItem in newsDialogData.newsInfo.newsContent" :key="newsItem.id">
                                            <img :src="newsItem.image" alt="">
                                            <span class="special-tit">{{newsItem.catname}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="news-content" v-else>
                                    <ul >
                                        <li v-for="newsItem in newsDialogData.newsInfo.newsContent" :key="newsItem.id" class="news-item" @click="toDetail(newsItem.catid,newsItem.id, newsItem.is_link,newsItem.url)">
                                            <span class="time">{{newsItem.inputtime}}</span>
                                            <div class="news-tit">{{newsItem.title}}</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-scrollbar>
                            <div class="bottom">
                                <el-pagination
                                    background 
                                    layout="prev, pager, next" 
                                    :total="newsDialogData.newsInfo.page" 
                                    :current-page="currentPage"
                                    @current-change='changePage' 
                                    />
                                <span @click="toMore">访问官网了解更多资讯></span>
                            </div>
                    </div>
                    <div v-else class="nodata">暂无数据</div>
                </div>

                <div class="big-contanier">
                    <div  v-if="newsDialogData.newsInfo.newsContent.length != 0">
                        <div class="special" v-if="newsType == '专题专栏'">
                            <el-scrollbar height="435px">
                                <div class="special-content">
                                    <div  class="special-item" v-for="newsItem in newsDialogData.newsInfo.newsContent" :key="newsItem.id">
                                        <img :src="newsItem.image" alt="" @click="toSpecial(newsItem.url)">
                                        <span class="special-tit">{{newsItem.catname}}</span>
                                    </div>
                                </div>
                            </el-scrollbar>
                        </div>
                        <div class="news-content" v-else>
                            <ul >
                                <li v-for="newsItem in newsDialogData.newsInfo.newsContent" :key="newsItem.id" class="news-item" @click="toDetail(newsItem.catid,newsItem.id, newsItem.is_link,newsItem.url)">
                                    <div class="news-tit">{{newsItem.title}}</div>
                                    <span class="time">{{newsItem.inputtime}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bottom">
                            <el-pagination
                                background 
                                layout="prev, pager, next" 
                                :total="newsDialogData.newsInfo.page" 
                                :current-page="currentPage"
                                @current-change='changePage' 
                                />
                            <span @click="toMore">访问官网了解更多资讯></span>
                        </div>
                    </div>
                    <div v-else class="nodata">暂无数据</div>
                </div>
            </div>
            <div class="news-detail" v-else>
                <i class="fanhui iconfont icon-xiangxiajiantou"  @click="newsListShow = true"></i>
                <div class="top">
                    <div class="back" @click="newsListShow = true">返回</div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <el-breadcrumb-item>医院新闻</el-breadcrumb-item>
                      <el-breadcrumb-item>{{newsType}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-scrollbar height="460px">
                  <!-- <div class="news-detail"> -->
                    <!-- <div class="news-title">{{newsDetail.newsInfo.title}}</div>
                    <span class="news-time">{{newsDetail.newsInfo.inputtime}}</span> -->
                    <div class="news-info" v-html="newsDetail.newsInfo.content"></div>
                  <!-- </div> -->
                </el-scrollbar>
            </div>
          </div>
        </el-dialog>
      </div>
</template>
<script setup>
/* eslint-disable */

    import { ref,reactive,toRefs, defineProps, defineEmits } from 'vue'
    import {
        ElDialog,
        ElScrollbar,
        ElPagination,
        ElBreadcrumb
    } from 'element-plus'
    import { getUrlQueryData} from '@/utils/tools'
    import {
        getNews,
        getNewsInfo } from '@/api/hosInfo'
    import { ArrowRight } from '@element-plus/icons-vue'

    const props = defineProps({
        newsDialogShow:Boolean
    })
    const isShow = reactive({
        get value(){ 
            return props.newsDialogShow;
        },
        set value(v){
            return ;
        }
    })

    const { newsDialogShow } = toRefs(props)
    const emit = defineEmits(["closeDialog","handelDialogClose"])
    //医院新闻
    //滑动导航栏
    const clickParams = reactive({
        clickNum:0, //点击次数
        lastLeft: 0, //上次滑动距离
        maxClickNum: 0 //最大点击次数
    })
    //点击右箭头
    const rightClick = () => {
        if(clickParams.clickNum < newsDialogData.newsInfo.newsType.length - 1) {
            //获取当前元素
            let width = document.querySelectorAll('.type')[clickParams.clickNum].offsetWidth + 20;
            let lastItemOffsetLeft = document.getElementsByClassName('type')[newsDialogData.newsInfo.newsType.length - 1].offsetLeft
            let lookWidth = document.getElementsByClassName("nav")[0].clientWidth; //获取可视区域宽度
            if (lastItemOffsetLeft > lookWidth) {
                document.getElementsByClassName('scroll')[0].style.marginLeft = `${-width + clickParams.lastLeft}px`
                clickParams.lastLeft = -width + clickParams.lastLeft;
                clickParams.clickNum += 1;
            }
            clickParams.maxClickNum = clickParams.clickNum
        }
    }
    //点击左箭头
    const leftClick = () => {
        if(clickParams.clickNum > 0) {
            let width = document.querySelectorAll('.type')[clickParams.clickNum - 1].offsetWidth + 20;
            document.getElementsByClassName('scroll')[0].style.marginLeft = `${clickParams.lastLeft + width}px`;
            clickParams.lastLeft = width + clickParams.lastLeft;
            clickParams.clickNum -- ;
        }
    }

    const newsDialogData = reactive({
        newsInfo: {
            newsType: [],
            newsContent: [],
            page:null,
            url:''
        }
    })
    const newsDetail = reactive({
        newsInfo:{
            content:''
        }
    })

    let isActive = ref('');
    let newsType = ref('')
    // 新闻分类
    const getNewsType = async(params) => {
        const res = await getNews(params)
            if (res.status != 200) {
                return
            }
        newsDialogData.newsInfo.newsType = res.data.label;
        newsDialogData.newsInfo.newsContent = res.data.data;
        newsDialogData.newsInfo.page = parseInt(res.data.page.count);
        newsDialogData.newsInfo.url = res.data.cat_url;
    }
    const onClicknewsNav = (navId, type) => {
        currentPage.value = 1;
        isActive.value = +navId;
        // 重新获取新闻列表
        const params = { 
            navId
        }
        if(type == "专题专栏") {
            params.page = {limit : 18};
        }
        getNewsType(params)
        newsType.value = type;
    }
    //新闻分页
    const currentPage = ref(1)
    const changePage = current => {
        currentPage.value = current;
        const params = {
            navId:isActive.value,
            page: {page:current}
        }
        if(newsType.value == "专题专栏") {
            params.page.limit = 18;
        }
        getNewsType(params)
    }
    const newsListShow = ref(true);

    import {getNewsInfoJSON} from '@/views/VR/dialogCmp/api.js'

    //获取新闻详情
    const getNewsDetail = async (params) => {
        // const res = await getNewsInfo(params)
        const res = getNewsInfoJSON
        if (res.status != 200) {
        return
        }
        newsDetail.newsInfo = res.data;
        newsDetail.newsInfo.content = res.data.content
    }
    const toDetail = (catid,id, isLink,url) => {
        if(isLink == 0) {
            newsListShow.value = false
            // 获取新闻详情
            const params = {
                url:getUrlQueryData(),
                catid,
                id
            }
            getNewsDetail(params)
        }else {
            window.open(url)
        }
    }
    //专题专栏
    const toSpecial = url => {
        window.open(url)
    }

    import {getNewsJSON} from '@/views/VR/dialogCmp/api.js'
    // 获取医院新闻
    const getNewsData = async (params) => {
        // const res = await getNews(params)
        const res = getNewsJSON

        if (res.status != 200) {
            return
        }
        newsDialogData.newsInfo.newsType = res.data.label;
        newsDialogData.newsInfo.newsContent = res.data.data;
        newsDialogData.newsInfo.page = parseInt(res.data.page.count);
        newsDialogData.newsInfo.url = res.data.cat_url;
        newsType.value = res.data.label[0].catname;
        isActive.value = res.data.default_catie;
    }
    const toMore = () => {
        window.open(newsDialogData.newsInfo.url)
    }

    getNewsData(getUrlQueryData())
</script>
<style scoped>
/* 医院新闻弹框 */
.newsDialog >>> .el-dialog {
  border-radius: 4px;
  width: 960px;
  height: 690px;
  min-width: 375px;
}
.newsDialog >>> .el-dialog__header {
    display: none;
}
.newsDialog >>> .el-dialog__body {
  padding: 40px 0 0 !important;
}
.newsDialog .close {
  font-size: 24px;
  color: #717378;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.newsDialog .close:hover {
    color: #1F73F2;
}
.newsDialog .content {
  height: 100%;
  box-sizing: border-box;
}
 .content .title {
  font-size: 24px;
  color: #000;
  margin-bottom: 36px;
  text-align: center;
  cursor: default;
}
 .content .nav {
    margin: auto;
    margin-bottom: 10px;
    overflow: hidden;
    width: 780px;
}
.content .nav .scroll {
    display: flex;
    transition: all 0.3s;
}
.content .nav .arrow{
    position: absolute;
    font-size: 20px;
    line-height: 20px;
    color: #1F73F2;
    top: 115px;
    cursor: pointer;
}
.content .nav .arrow.left {
    left: 58px;
}
.content .nav .arrow.right {
    right: 58px;
}
 .content .nav .type {
  width: 140px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #000000;
  background-color: #F2F2F2;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0
}
 .content .nav .type + .type {
  margin-left: 20px;
}
 .content .nav .type.active {
  background-color: #1F73F2;
  color: #fff;
}
.newsDialog .big-contanier .news-content  {
  padding:  0 80px;
  /* min-height: 487px; */
}
.newsDialog .content .news-content  ul {
  margin-bottom: 10px;
}
.newsDialog .big-contanier .news-content  ul .news-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(170, 170, 170, 0.2);
  padding: 16px 0;
  color: #333333;
  font-size: 14px;
  font-family: Arial;
  cursor: default;
  line-height: 14px;
}
.newsDialog .content .news-content  ul .news-item:hover .news-tit{
  color:#1F73F2
}
.newsDialog .big-contanier  .news-content  ul .news-item .news-tit {
  width: 700px;
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  cursor: pointer;
}
.newsDialog .small-contanier .news-content  {
  padding:  0 30px;
}
.newsDialog .small-contanier .news-content  ul .news-item {
  border-bottom: 1px solid rgba(170, 170, 170, 0.2);
  padding: 8px 0;
  color: #333333;
  font-size: 14px;
  font-family: Arial;
  cursor: default;
}
.newsDialog .small-contanier  .news-content  ul .news-item .news-tit {
  width: 300px;
  font-size: 14px;
  height: 42px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  cursor: pointer;
}
.newsDialog .content >>> .el-pagination.is-background .btn-next, 
.newsDialog .content >>> .el-pagination.is-background .btn-prev, 
.newsDialog .content >>> .el-pagination.is-background .el-pager li {
  background: transparent;
}
.newsDialog .content >>> .el-pagination.is-background .el-pager li {
  color: #AAAAAA;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  min-width: 30px;
}
.newsDialog .content >>> .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: #AAAAAA;
  font-weight: normal;
  color: #fff
}
.newsDialog .bottom {
    padding: 0 80px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.newsDialog .bottom span {
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #1F73F2;
    cursor: pointer;
    position: absolute;
    right: 80px;
}

.newsDialog .content .news-detail {
  padding-bottom: 80px;
  height: calc(100% - 103px);
  box-sizing: border-box;
}

/* 面包屑 */
.content .top {
  display: flex;
  align-items: center;
  padding: 0 80px;
  margin-bottom: 24px;
  font-size: 14px;
}
.content .top >>> .el-breadcrumb {
  margin-top: 1px;
  cursor: default;
}
.content .top >>> .el-breadcrumb__inner {
    color: #AAA;
}
.content .top .back {
  position: relative;
  margin-right: 20px;
  color: #1F73F2;
  cursor: pointer;
}
.content .top .back:after {
  content: '';
  display: block;
  height: 16px;
  width: 1px;
  background-color: rgba(170, 170, 170, 0.5);
  position: absolute;
  top: 2px;
  right: -0.625rem;
}
.fanhui {
    display: none;
}
.content >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 20px;
  background-color: rgba(170, 170, 170, 0.5)
}
.content >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.content >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #1F73F2;
  opacity: 1;
}
.newsDialog .content .news-info {
  padding: 0 80px;
  cursor: default;
}
.special-content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 80px;
    margin-right: -10px;
}
.special-content .special-item {
    width: 260px;
    height: 184px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
}
.special-content .special-item img {
    width: 100%;
    height: 146px;
    cursor: pointer;
}
.special-content .special-item .special-tit{
    font-size: 14px;
    width: 100%;
    height: 28px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
}
.special {
    margin-top: 24px;
}
.nodata {
    text-align: center;
    min-height: 400px;
}
.small-contanier {
    display: none;
}
@media screen and (max-width: 1360px) and  (min-width: 1024px){
    .newsDialog >>> .el-dialog {
        transform: scale(0.8);
        transition:transform 0.3s linear;
    }
}
@media screen and (max-width: 1024px) {
    .newsDialog >>> .el-overlay {
        z-index: 10001 !important;
    }
    .newsDialog >>> .el-dialog {
        /* width: 360px; */
        width: 95%;
        height: 95%;
        margin: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 4px 4px 0 0;
    }
    .newsDialog >>> .el-dialog__body {
        padding: 20px 0 0 !important;
        height: 100%;
        box-sizing: border-box;
    }
    .newsDialog .close {
        font-size: 16px;
    }
    .content .title {
        font-size: 18px;
        margin-bottom: 30px;
    }
    .nav-content {
        padding: 0 30px;
    }
    .content .nav {
        /* margin-bottom: 10px; */
        overflow-y: hidden;
        overflow-x: auto;
        margin-bottom: 0px;
        width: 100%;
        padding-bottom: 10px;
    }
    .content .nav .arrow{
        display: none;
    }
    .content .nav .type {
        width: 72px;
        height: 22px;
        line-height: 22px;
    }
    .newsDialog .bottom span {
        display: none
    }
    .small-contanier {
        display: block;
        height: calc(100% - 70px);
    }
    .big-contanier {
        display: none;
    }
    .content >>> .el-scrollbar__bar.is-vertical {
        right: 10px;
    }
    .newsDialog .bottom {
        padding: 0 14px;
    }
    .newsDialog .content >>> .el-pagination.is-background .el-pager li {
        border-radius: 4px;
        margin: 0 1px;
    }
    .newsDialog .small-contanier .news-content ul .news-item .news-tit {
        width: 100%;
    }
    /* .special .special-scrollbar {
        height: 569px !important;
    } */
    .special {
        margin-top: 10px;
    }
    .special-content {
        padding: 0 30px;
        margin-right: -10px;
    }
    .special-content .special-item {
        width: 300px;
        height: 192px;
    }
    .special-content .special-item img {
        width: 100%;
        height: 168px;
        margin-bottom: 10px;
    }
    .content .top .back {
        display: none;
    }
    .fanhui {
        display: block;
        position: absolute;
        left: 20px;
        top: 25px;
        font-weight: bold;
        font-size: 16px;
        color: #1F73F2;
        transform: rotate(90deg);
        cursor: pointer;
    }
    .content .top {
        padding: 0 30px;
        font-size: 12px;
    }
    .newsDialog .content .news-info {
        padding: 0 30px;
    }
    .newsDialog .content .news-detail >>> .el-scrollbar__wrap {
        height: 100% !important;
    }
    .newsDialog .content .news-detail {
        padding-bottom: 30px;
        height: calc(100% - 103px);
    }
    
}

</style>